2021 WMU Graphic Design Thesis's profile

Kendall Willey | Pronto: Non-Verbal Communication App

Thesis Statement
Living with a disability can be hard enough but imagine not being able to communicate. Children with learning disabilities are often on the low end for prioritization in our schooling systems, so there aren’t many ways to teach non-verbal children to talk except picture cards or minimal amounts of apps. The apps that are available are hectic and hard to navigate, which can easily frustrate a child. Another issue is no separation between school and home. There are more options available to a child at home than school, so if they press something that isn’t at school, this can easily upset a child due to them not being able to understand why that option is not available. 


Goals
My intention is to make an app for these kids that is easy to understand and navigate with a clean and minimalistic approach, so as to not overwhelm them. I also wanted to make the school category the same across all devices as to help the teachers, and make the home category customizable for the child.


Audience
The intended audience for this product would be non-verbal children, parents of those children, as well as teachers and speech therapists that work at the schools these children are going to. What I'm hoping my audience understands from this project is that this could be an app that they would be able to rely on to communicate certain needs, that won't easily frustrate a child. 


Research
My inspiration relied heavily on color, and how that could be used throughout, as well as simple iconography or symbols. I went to multiple sources (down below) to understand the programs that are out there better, so I would know what and what not to include.​​​​​​​
​​​​​​​


Process
From that point I dove into sketching out how I wanted certain buttons to be laid out, and how certain icons would look. I wanted my icons to be cohesive, so I stuck with a similar stroke weight throughout, so that it would be easily identifiable. I also wanted to make things a little quirky, just to bring that playfulness into this project. Sketching these designs out really helped because I was able to determine how buttons would interact and how transitions from page to page would work. Then I moved onto the computer...
preliminary sketches of app layout and buttons
first digital sketches
talking person icon
After the sketching process, I started to bring things to life. I took my hand drawn sketches and used the pen tool in Adobe Illustrator to create my icons and buttons. A couple examples of this step by step process can be seen with my talking person or my orange button.
During this process, I saw there were a couple icons I had to refine to make them look like the real thing as much as possible. An example of this would be my pancakes button. I went from a plain stack to adding syrup to them, just to show that the smallest changes make the biggest differences.
Afterwards, I was able to come up with a color system where pronouns were orange, actions were navy blue, rooms were a mint, people were pink, and activities were green. 

Next came with naming the app. I went through a few options, them being pronto, zap, snappy, or blink. I came up with names that had to do with quickness and getting to the end result as fast as possible. Since that was the main point behind this project.

Which led me to the name Pronto which I put in Hatch Bold Italic....this name seemed to be the easiest option out of the group so that a non-verbal child would be able to vocalize the name if need be, and was the most interesting out of them. I came up with the slogan, “tap to talk” to emphasize what the product does, which I put Paralucent Light, and then the words on each button are in Arbotek Light Rounded
Listening to feedback on my early designs, I was able to collect insight that I needed to work on readability issues. Whether that be the opening screen after logging in on the left, or the main home screen like on the right. The issues I ran into were the icons slightly disappearing on the page, and color issues throughout. I was then able to make my icons with a fill instead of a stroke, just so that it was able to stand out better, and so a child would be able to recognize what that item was as fast as possible.
The color issues I ran into were making all of the buttons the same color. I realized at this point I would need to make each button a color associated with that item. An example of this would be making the grapes button purple or the apple button red. If there weren’t any easy identifiable colors associated with a button, I came up with the closest option I could. They needed to be multicolor or represent what that item was so that it was easier for the child to find that item and differentiate them from others.


Final Outcome
So...with many hours later, Pronto was born. Once revisions were made, I was able to make my end result which consists of many screens that can be navigated through, through the program Adobe XD. Examples of this would be my login screen when you first open the app, and the main page separating school and home.
video walk through of app
From the video run through, once you download the app you will be required to enter in an email and password, whether that be a personal email that the parents have or one that is assigned to the kids through schools. From that point you have the option between home and school. I had this option due to certain items not being available to the children while at school like they could have at home. As you touch each word, it is read out loud in a grammatically correct sentence, to mimic a person actually speaking. The child then has the option of either tapping on the talking person icon or the white bar to have a better range of motion to say the sentence out loud again as a whole. I also have an add food item option, so that each screen is customizable for each child. I also added a back button so that it was easy to go to the school main page. By pushing on the school icon, it takes you to the page if you want to go to the home section. A difference between school and home, is having the option to do more activities based on what that child likes, including tv shows. Examples of some similarities between the two sections though would be the foods page, and basic necessities.


Promotions
example of the app on an iPad home screen
promotion shown on a school's home page
instagram ad
From this point, I made a mockup to show what the app would look like on the home page of an iPad. For this, I wanted to keep it simple but also playful so I used the P from Pronto and included colors used throughout the app indicated by the dots. I made a few promotions that can be shown on schools home pages for parents/teachers to see. And sponsored ads that can show up on a person's instagram feed.


Reflection
Overall, this project has taught me to see things from a different perspective, to trust the process, know mistakes will be made, and to be extremely patient. I realized that process sketching is vital for creating the end result. Communication doesn’t come easy to some, and this app would be a helpful step in the right direction for them.


Sources
Autism Spectrum Disorder: Communication Problems in Children. (2020, December 14). Retrieved February 20, 2021, from 
https://www.nidcd.nih.gov/health/autism-spectrum-disorder-communication-problems-children 
Cours, S. (2020, May 27). 22 Children's Books That Support SEL. February January 21, 2021, from https://betterkids.education/blog/22-children-books-that-support-social-emotional-learning
Grandin, T. (n.d.). Teaching tips for children and adults with autism. Retrieved February 21, 2021, from 
https://www.iidc.indiana.edu/irca/articles/teaching-tips-for-children-and-adults-with-autism.html
Hodgdon, L. (2020, May 12). Improving Communication & Behavior. Retrieved February 20, 2021, from https://autismawarenesscentre.com/improving-communication-behavior/
Lewis, S. (2016, May 11). 6 easy steps to better icon design. Retrieved February 21, 2021, from https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
Manolis, L. (2016, March 15). 6 Tips for Teaching Students With Autism. Retrieved February 20, 2021, from https://www.teachforamerica.org/stories/6-tips-for-teaching-students-with-autism
Morin, A. (2021, January 07). Autism: What you need to know. Retrieved February 21, 2021, from 
https://www.understood.org/en/learning-thinking-differences/getting-started/what-you-need-to-kn ow/what-is-autism?utm_source=google&utm_medium=paid&utm_campaign=evrgrn-may20-fm& gclid=CjwKCAiAyc2BBhAaEiwA44-wW3KzHSphBqp8Dobvv-8IXI2NSYXOjG-Ycwe9g1j4R2q5C VPljxQytBoCVnQQAvD_BwE
Narkevic, R. (2019, December 18). Supporting Students with Autism: 10 Ideas for Inclusive Classrooms. Retrieved February 21, 2021, from https://www.readingrockets.org/article/supporting-students-autism-10-ideas-inclusive-classroom
Teaching Students With Autism Spectrum Disorder: Tips, Resources, and Information On Supporting Students with Autism. (2019, April 03). Retrieved February 21, 2021, from https://www.waterford.org/education/activities-for-children-with-autism/
Yalanska, M. (2021, January 26). How to build a strong mobile app brand. Retrieved February 21, 2021, from https://design4users.com/mobile-app-brand/
Tamer Koseli 
https://www.behance.net/gallery/39363035/hush-App?tracking_source=search_projects_recom mended%7Capp%20interface
Tamer Koseli 
https://www.behance.net/gallery/60524411/Various-Icons
Multiple artists 
https://www.behance.net/gallery/64281103/Restaurant-Icon-set-for-Adobe-XD?tracking_source =search_projects_recommended%7Cfood%20icons
Multiple artists 
https://www.behance.net/gallery/113036947/KitchenJet?tracking_source=search_projects_reco mmended%7Cipad%20app
Ramotion-UI/UX design & Branding agency 
https://www.behance.net/gallery/55623181/Volusion-Brand-Identity-Design?tracking_source=pr oject_owner_other_projects
Peter Garvin 
https://www.behance.net/gallery/105556701/IBM-app-icons?tracking_source=search_projects_r ecommended%7Ciconography
Forma & Co. 
https://www.behance.net/gallery/107176535/Badoo-Iconography?tracking_source=search_proje cts_recommended%7Ciconography
Cuberto 
https://www.behance.net/gallery/96757753/Sleepiest?tracking_source=search_projects_recom mended%7Capp%20branding
Multiple artists 
https://www.behance.net/gallery/90499011/Qozo-Branding?tracking_source=search_projects_r ecommended%7Capp%20branding
Laura Tarò 
https://www.behance.net/gallery/97281741/CaRe-App?tracking_source=search_projects_recom mended%7Cchildrens%20app%20branding
Kendall Willey | Pronto: Non-Verbal Communication App
Published:

Kendall Willey | Pronto: Non-Verbal Communication App

Published:

Creative Fields